<template>
  <div class="data-container">
      <analysis-home :active="2"></analysis-home>
      <div class="analysis2-main-content">
        <el-row>
          <el-col :span="6">
            <div class="item box-card">
              <box-card-multi-analysis-2-menzhenyewuliang :items="items1" title="门诊业务量统计"></box-card-multi-analysis-2-menzhenyewuliang>
            </div>
            <div class="box-card item">
              <box-card-single-analysis-2-chufangqushi title="处方趋势统计"></box-card-single-analysis-2-chufangqushi>
            </div>
            <div class="box-card item">
              <box-card-multi-analysis-2-shouruqushi title="收入趋势统计" :items="items3"></box-card-multi-analysis-2-shouruqushi>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="map h-1-3">
              <box-card-single-analysis-2-menzhenyewulang title="门诊业务量统计"></box-card-single-analysis-2-menzhenyewulang>
            </div>
            <el-col class="h-2-3" :span="12" >
              <div class="chart5 h-2-3">
                <box-card-multi-analysis-2-zhuyuanyewu title="住院业务量排行" :items="items6"></box-card-multi-analysis-2-zhuyuanyewu>
              </div>
            </el-col>
            <el-col class="h-2-3" :span="12">
              <div class="chart6 h-2-3">
                <box-card-single-analysis-2-zhuyuanyewuzhanbi title="住院业务量占比"></box-card-single-analysis-2-zhuyuanyewuzhanbi>
              </div>
            </el-col>
          </el-col>
          <el-col :span="6">
            <div class="box-card h-1-5">
              <box-card-single-analysis-2-yijiyewuliang title="医技业务量统计"></box-card-single-analysis-2-yijiyewuliang>
            </div>
            <div class="box-card h-4-5-2">
              <box-card-single-analysis-2-baogaodanshulang title="报告单数量统计"></box-card-single-analysis-2-baogaodanshulang>
              
            </div>
            <div class="box-card h-4-5-2">
              <box-card-multi-analysis-2-baogaodanqushi :items="items12" title="报告单趋势统计"></box-card-multi-analysis-2-baogaodanqushi>
            </div>
          </el-col>
        </el-row>
      </div>
  </div>
</template>

<script>
import analysisHome from './analysisHome'
import BoxCardMultiAnalysis2Menzhenyewuliang from './components/box-card-multi-analysis2-menzhenyewuliang.vue';
import BoxCardSingleAnalysis2Chufangqushi from './components/box-card-single-analysis2-chufangqushi.vue';
import BoxCardMultiAnalysis2Shouruqushi from './components/box-card-multi-analysis2-shouruqushi.vue';
import BoxCardSingleAnalysis2Menzhenyewulang from './components/box-card-single-analysis2-menzhenyewulang.vue';
import BoxCardMultiAnalysis2Zhuyuanyewu from './components/box-card-multi-analysis2-zhuyuanyewu.vue';
import BoxCardSingleAnalysis2Zhuyuanyewuzhanbi from './components/box-card-single-analysis2-zhuyuanyewuzhanbi.vue';
import BoxCardSingleAnalysis2Yijiyewuliang from './components/box-card-single-analysis2-yijiyewuliang.vue';
import BoxCardSingleAnalysis2Baogaodanshulang from './components/box-card-single-analysis2-baogaodanshulang.vue';
import BoxCardMultiAnalysis2Baogaodanqushi from './components/box-card-multi-analysis2-baogaodanqushi.vue';
export default {
  name:'analysis2',
  components: {
    analysisHome,
    BoxCardMultiAnalysis2Menzhenyewuliang,
    BoxCardSingleAnalysis2Chufangqushi,
    BoxCardMultiAnalysis2Shouruqushi,
    BoxCardSingleAnalysis2Menzhenyewulang,
    BoxCardMultiAnalysis2Zhuyuanyewu,
    BoxCardSingleAnalysis2Zhuyuanyewuzhanbi,
    BoxCardSingleAnalysis2Yijiyewuliang,
    BoxCardSingleAnalysis2Baogaodanshulang,
    BoxCardMultiAnalysis2Baogaodanqushi
  },
  data() {
    return {
      curId1:0,
      items1:[
        {
          id:0,
          label:'门诊',
        },{
          id:1,
          label:'急症'
        }
      ],
      curId3:30,
      items3:[
        {
          id:0,
          label:'门诊总收入'
        },
        {
          id:1,
          label:'门诊现金总收入'
        },
        {
          id:2,
          label:'门诊医保总收入'
        },
        {
          id:3,
          label:'住院总收入'
        }
      ],
      curId6:60,
      items6:[
        {
          id:0,
          label:'入院总人次'
        },
        {
          id:1,
          label:'出院总人次'
        },
        {
          id:2,
          label:'住院总收入'
        }
      ],
      curId12:120,
      items12:[
        {
          id:0,
          label:'检查'
        },
        {
          id:1,
          label:'检验'
        },
      ]
    };
  },
  methods: {

  },
};
</script>

<style scoped lang="less">
.left{float: left;}
.right{float: right;}
.red{ background: red;}
.green{ background: green;}
.blue{ background: blue;}
.data-container{
  background:url('~@/assets/images/large-bg.png') no-repeat;
  height: 100vh;
  background-size:cover;
  background-position: center center;
  .analysis2-main-content{
    padding:.1rem;
      .el-row{
        height: calc(100vh - 1.23rem);
        .el-col{
          height:calc(100vh - 1.23rem);
          .borderBottom-1px{
            border-bottom: 1px solid #7787C7 ;
          }
          .borderBottom-2px{
            border-bottom: 2px solid #7787C7 ;
          }
          .box-card{
            width: 98%;
            margin-left:1%;
            margin-right: 1%;
            height:calc( (100vh - 1.23rem) / 3 );
            .head-wrap{
              font-size: .16rem;
              color:#ffffff;
              overflow: hidden;
              .title{
                height: .26rem;
                line-height: .262rem;
              }
              .operate{
                span{
                  height: .26rem;
                  line-height: .26rem;
                  display: inline-block;
                  cursor: pointer;
                  background: url('~@/assets/images/671.png') no-repeat center center;
                  background-size: contain;
                  padding: 1px .1rem;
                }
                span.active{
                  background: url('~@/assets/images/670.png') no-repeat center center;
                  background-size: contain;
                  padding: 1px .1rem;
                  font-size: .14rem;
                }
              }
            }
            .content-wrap{
              width: 100%;
              height:calc( (100vh - 1.23rem) / 3 - .36rem) ;
              .chart-content{
                width: 100%;
                height:calc( (100vh - 1.23rem) / 3 - .36rem) ;
                float: left;
                overflow: hidden;
              }
            }
            img{width: 100%;float: left;}
          }
          .chart5,.chart6{
            width: 98%;
            margin-left:1%;
            margin-right: 1%;
          }
          .h-1-3{height:calc( (100vh - 1.23rem) / 3 ) !important;}
          .h-2-3{height:calc( (100vh - 1.23rem) * 2 / 3 ) !important;}
          .h-2-3{height:calc( (100vh - 1.23rem) * 2 / 3 ) !important;}
          .h-1-5{height:calc( (100vh - 1.23rem) / 5 ) !important;}
          .h-4-5-2{height:calc( (100vh - 1.23rem) * 4 / 10 ) !important;}
        }
      }
  }
}
</style>